<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-table :data="skuPageList" border stripe>
            <el-table-column type="index" width="80" label="序号"/>
            <el-table-column label="名称" prop="skuName"></el-table-column>
            <el-table-column label="描述" prop="skuDesc"></el-table-column>
            <el-table-column label="默认图片">
                <template #="{row}">
                    <img :src="row.skuDefaultImg" alt="" width="100">
                </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight"></el-table-column>
            <el-table-column label="价格" prop="price"></el-table-column>
            <el-table-column label="操作" width="250">
                <template #="{row}">
                    <el-button v-if="row.isSale===0" type="info" size="small" title="上架" @click="onSale(row)" icon="ele-Top"></el-button>
                    <el-button v-else type="success" size="small" title="下架" @click="canSale(row)" icon="ele-Bottom"></el-button>
                    <el-button type="primary" size="small" title="修改" @click="edit(row)" icon="ele-Edit"></el-button>
                    <el-button type="info" size="small" title="详情" @click="showDetail(row)" icon="ele-InfoFilled"></el-button>
                    <el-button type="danger" size="small" title="删除" @click="deleteSku(row)" icon="ele-Delete"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        v-model:page-size="limit"
        v-model:current-page="page"
        :page-sizes="[10, 15, 5, 19]"
        :pager-count="5"
        layout="prev, pager, next,sizes,total"
        :total="total"
        />
        <el-drawer v-model="drawer" size="50%" :with-header="false" @close="closeDrawer">
            <el-row>
                <el-col :span="6">名称</el-col>
                <el-col :span="18">{{skuDetail.skuName}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">描述</el-col>
                <el-col :span="18">{{skuDetail.skuDesc}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">价格</el-col>
                <el-col :span="18">{{skuDetail.price}}</el-col>
            </el-row>
            <el-row>
                <el-col :span="6">平台属性</el-col>
                <el-col :span="18">
                    <el-tag v-for="item in skuDetail.skuAttrValueList" :key="item.id">{{item.attrName}}-{{item.valueName}}</el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">销售属性</el-col>
                <el-col :span="18">
                    <el-tag v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">{{item.saleAttrName}}-{{item.saleAttrValueName}}</el-tag>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">商品图片</el-col>
                <el-col :span="18">
                    <el-carousel height="450px" trigger="click">
                        <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id" >
                            <img :src="item.imgUrl" alt="" width="450" height="450">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </el-card>
    
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Sku",
});
</script>

<script setup lang="ts">
    import { requestcancelSale, requestDeleteSku, requestFindById, requestOnSale, requestSkuList, type SkuInfoItemType, type SkuInfoListType } from '@/api/sku';
import { ElMessage } from 'element-plus';
import {onMounted, ref,watch} from 'vue'

    const page = ref(1)
    const limit = ref(5)
    const total = ref(0)
    //分页列表初始化
    const skuPageList = ref<SkuInfoListType>([])
    //获取sku分页列表
    const getSkuPageList = async () => {
        try{
            const re = await requestSkuList(page.value,limit.value)
            skuPageList.value = re.records
            total.value = re.total
        }catch(e){
            ElMessage.error('获取sku分页列表失败')
        }
    }
    //初始化获取数据
    onMounted(() => {
        getSkuPageList()
    })
    //监听页码
    watch([page,limit],() => {
        //重新发送请求
        getSkuPageList()
    })
    //点击上架
    const onSale = async (row:SkuInfoItemType) => {
        try{
            await requestOnSale(row.id as number)
            ElMessage.success('上架成功')
            //重新发送请求
            getSkuPageList()
        }catch(e){
            ElMessage.error('上架失败')
        }
    }
    //点击下架
    const canSale = async (row:SkuInfoItemType) => {
        try{
            await requestcancelSale(row.id as number)
            ElMessage.success('下架成功')
            //重新发送请求
            getSkuPageList()
        }catch(e){
            ElMessage.error('下架失败')
        }
    }
    //编辑
    const edit = (row: SkuInfoItemType) => {
    ElMessage.info("正在开发中....");
    };
    //删除sku
    const deleteSku = async (row: SkuInfoItemType) => {
        try{
            await requestDeleteSku(row.id as number)
            ElMessage.success('删除成功')
            //重新发送请求
            getSkuPageList()
        }catch(e){
            ElMessage.error('删除失败')
        }
    }
    //控制抽屉
    const drawer = ref(false)
    //初始sku
    const skuDetail = ref<SkuInfoItemType>({
        price: 0,
        skuName: '',
        skuDesc: '',
        weight: '',
        category3Id: null,
        skuDefaultImg: '',
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: []
    })
    //点击获取sku详情
    const showDetail = async (row:SkuInfoItemType) => {
        try{
            drawer.value = true
            const re = await requestFindById(row.id as number)
            skuDetail.value = re
        }catch(e){
            ElMessage.error('获取sku详情失败')
        }
    }
    //关闭抽屉
    const closeDrawer = () => {
        skuDetail.value = {
            price: 0,
            skuName: '',
            skuDesc: '',
            weight: '',
            category3Id: null,
            skuDefaultImg: '',
            skuImageList: [],
            skuAttrValueList: [],
            skuSaleAttrValueList: []
        }
    }
</script>